<template>
  <el-container style="height: 100%; display: block">
    <el-header style="padding: 0; width: 100%; background-color: #0d497d;" height="250px;">
      <template v-if="loginFlag === 0">
        <div class="header_back">
          <div style="width: 1200px; margin: 0 auto; height: 180px; display: flex; align-items: center; justify-items: center; justify-content: space-between;">
            <div style="font-size: 55px; color: #ffffff; font-weight: bold; cursor: pointer;"><div style="float: left"><img
              src="../assets/img/logo_xl.png"
              style="width: 120px;height: 120px"
            ></div><div style="width: 800px;margin-top: 30px">中小企业数智生态报告</div></div>
          </div>
        </div>
      </template>
      <template v-if="loginFlag === 1">
        <div class="header_back">
          <div style="width: 1200px; margin: 0 auto; height: 180px; display: flex; align-items: center; justify-items: center; justify-content: space-between;">
            <div style="font-size: 55px; color: #ffffff; font-weight: bold; cursor: pointer;">中小企业数智生态报告</div>
          </div>
        </div>
        <div style="width: 1200px; margin: 0 auto;">
          <el-menu :default-active="activeIndex" mode="horizontal" background-color="#0d497d" active-text-color="#ffd04b" style="border-bottom: 0; width: 900px;" @select="handleSelect">
            <el-menu-item index="1">控制台</el-menu-item>
            <el-menu-item index="2">基本信息</el-menu-item>
            <el-menu-item index="3">数智生态诊断</el-menu-item>
            <el-menu-item index="4">问卷调查</el-menu-item>
            <el-submenu index="5">
              <template slot="title" style="border-bottom-color: transparent;background-color: #ffffff;">账号管理</template>
              <el-menu-item index="5-1">修改密码</el-menu-item>
              <!--              <el-menu-item index="5-2">更换手机号</el-menu-item>-->
              <el-menu-item index="5-3">退出登录</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </template>
    </el-header>
    <el-main style="padding: 0;">
      <div :style="{'margin': '0 auto', 'width': '100%', 'min-height': screenHeight + 'px'}">
        <router-view />
      </div>
      <el-footer style="padding: 0; background-color: #5a5e66; overflow: hidden; height: 260px;">
        <div style="color: #ffffff; max-width: 1200px; margin: 30px auto; line-height: 36px; text-align: center; font-size: 14px; font-weight: normal">
          <div class="foot-xl">
            <div style="float: left">
              <ul>
                <li>指导单位：工业和信息化部中小企业局</li>
                <li>支撑单位：上海熙浪网络信息科技有限公司 <span style="margin-left: 20px">瑞泽征信有限公司</span></li>
                <!--              <li style="margin-left: 70px"></li>-->
                <li><span style="margin-right: 27px">地</span>址：上海市浦东新区浦东大道138号永华大厦18层</li>
                <li>联系方式：13618270082</li>
                <li><span style="margin-right: 20px">Copyright 2024 ALL RIGHTS RESERVED</span>  沪ICP备2024095841号-1</li>
              </ul>
            </div>
            <div style="float: left;margin-left: 40px"><img src="../assets/img/erwm.png" style="width: 135px;height: 140px;border: 5px solid #ffffff"><div style="line-height: 18px">企业微信</div></div>
          </div>
        </div>
      </el-footer>
    </el-main>
  </el-container>
</template>
<script>
import { getUsername, removeUsername, removeToken } from '@/utils/auth'
import { check, logout } from '@/api/user'
import { find2 } from '@/api/base'
export default {
  data() {
    return {
      screenHeight: 500,
      loginFlag: 0,
      activeIndex: '0',
      username: getUsername()
    }
  },
  created() {
    this.screenHeight = screen.height - 350
    const route = this.$route.path
    if (route === '/') {
      check().then(response => {
        if (response.result === 1) {
          this.loginFlag = 1
          this.$router.push({ name: 'Console' })
        } else {
          this.loginFlag = 0
        }
      }).catch(() => {
        this.loginFlag = 0
      })
    } else if (route === '/console') {
      this.activeIndex = '1'
      this.loginFlag = 1
    } else if (route.indexOf('/base') >= 0) {
      this.activeIndex = '2'
      this.loginFlag = 1
    } else if (route.indexOf('/diagnosis') >= 0) {
      this.activeIndex = '3'
      this.loginFlag = 1
    } else if (route.indexOf('/questionnaire') >= 0) {
      this.activeIndex = '4'
      this.loginFlag = 1
    } else if (route.indexOf('/password') >= 0) {
      check().then(response => {
        if (response.result === 1) {
          this.loginFlag = 1
        } else {
          this.userLogout()
        }
      }).catch(() => {
        this.userLogout()
      })
    } else if (route.indexOf('/mobile') >= 0) {
      check().then(response => {
        if (response.result === 1) {
          this.loginFlag = 1
        } else {
          this.userLogout()
        }
      }).catch(() => {
        this.userLogout()
      })
    } else {
      this.loginFlag = 0
    }
  },
  methods: {
    handleSelect(key) {
      if (key === '1') {
        this.$router.push({ name: 'Console' })
      } else if (key === '2') {
        this.$router.push({ name: 'BaseUpdate' })
      } else if (key === '3') {
        this.$router.push({ name: 'DiagnosisIndex' })
      } else if (key === '4') {
        find2().then(response => {
          if (response.result === 1) {
            this.$router.push({ name: 'QuestionnaireAdd' })
          } else if (response.result === 2) {
            this.$message({
              message: '请完善企业基本信息', type: 'warning'
            })
            this.activeIndex = '1'
            this.$router.push({ name: 'Console' })
            return false
          } else {
            return false
          }
        })
      } else if (key === '5-1') {
        this.$router.push({ name: 'ChangePassword' })
      } else if (key === '5-2') {
        this.$router.push({ name: 'ChangeMobile' })
      } else if (key === '5-3') {
        this.userLogout()
      }
    },
    onHome() {
      this.$router.push('/')
    },
    onConsole() {
      this.$router.push({ name: 'Console' })
    },
    userLogout() {
      logout().then(response => {
        if (response.result === 1) {
          removeToken()
          removeUsername()
          this.$router.push('/')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header_back {
  background: url(../assets/img/head_bg1.jpg) center center no-repeat;
  background-size: 100% 100%;
  width: 100%;
  min-height: 180px;
  height: 80px;
}
.el-menu--horizontal .el-menu-item {
  color: white;
  font-size: 16px;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
}
.el-menu--horizontal .el-menu-item:hover {
  color: #ffd04b;
}
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
  background-color: #46a6ff;
  color: #46a6ff;
}
</style>
<style>
.el-menu--horizontal .el-submenu .el-submenu__title {
  line-height: 50px;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
}
.el-menu--horizontal .el-submenu:hover .el-submenu__title {
  line-height: 50px;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
}
.el-menu--horizontal > .el-submenu:focus .el-submenu__title, .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
  color: #ffffff;
}
  .foot-xl{
    width: 750px;
    margin: auto;
  }
  .foot-xl ul{
    width: 495px;
    margin: auto;
     list-style-type: none;
    /*float: left;*/
  }
   .foot-xl li {
     text-align: left;
   }
</style>
